<template>
    <view class="withdraw-record-container">
        <!-- 加载状态 -->
        <view class="loading-container" v-if="isLoading">
            <u-loading mode="circle" size="36"></u-loading>
            <text class="loading-text">加载中...</text>
        </view>
        
        <view v-else>
            <!-- 记录列表 -->
            <view class="record-list">
                <view v-if="recordList.length === 0" class="empty-record">
                    <u-empty mode="list" text="暂无提现记录"></u-empty>
                </view>
                
                <view v-else>
                    <view v-for="(item, index) in recordList" :key="index" class="record-item">
                        <view class="record-header flex row-between">
                            <text class="record-time">{{item.create_time}}</text>
                            <text class="record-status" :class="getStatusClass(item.status)">{{getStatusText(item.status)}}</text>
                        </view>
                        <view class="record-body flex row-between">
                            <view class="record-info">
                                <view class="record-amount-change">提现金额：¥ {{item.change_amount}}</view>
                                <view class="record-amount-left">余额：¥ {{item.left_amount}}</view>
                            </view>
                            <view class="record-amount">¥ {{item.change_amount}}</view>
                        </view>
                    </view>
                    
                    <!-- 加载更多 -->
                    <view class="load-more" v-if="recordList.length > 0">
                        <u-loadmore :status="loadStatus" icon-type="flower" />
                    </view>
                </view>
            </view>
        </view>
        
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
import { apiWithdrawLog } from "@/api/user.js"

export default {
    data() {
        return {
            isLoading: true,
            recordList: [],
            page: 1,
            limit: 10,
            hasMore: false,
            loadStatus: 'loadmore', // loadmore, loading, nomore
            total: 0,
            isLoadingMore: false // 新增：标记是否正在加载更多
        }
    },
    onLoad() {
        this.getRecordList();
    },
    onPullDownRefresh() {
        this.page = 1;
        this.recordList = [];
        this.loadStatus = 'loadmore';
        this.getRecordList().then(() => {
            uni.stopPullDownRefresh();
        });
    },
    onReachBottom() {
        if (this.hasMore && !this.isLoadingMore) {
            this.loadMore();
        }
    },
    methods: {
        // 加载更多数据
        loadMore() {
            this.loadStatus = 'loading';
            this.isLoadingMore = true;
            this.page++;
            this.getRecordList();
        },
        
        // 获取记录列表
        async getRecordList() {
            try {
                if (this.page === 1) {
                    this.isLoading = true;
                }
                
                const params = {
                    page: this.page,
                    limit: this.limit
                };
                
                const res = await apiWithdrawLog(params);
                
                if (res && res.lists) {
                    const newList = res.lists || [];
                    
                    if (this.page === 1) {
                        this.recordList = newList;
                    } else {
                        this.recordList = [...this.recordList, ...newList];
                    }
                    
                    this.total = res.count || 0;
                    
                    // 判断是否有更多数据
                    this.hasMore = this.recordList.length < this.total;
                    this.loadStatus = this.hasMore ? 'loadmore' : 'nomore';
                    
                    // 如果没有数据返回，说明没有更多了
                    if (newList.length === 0) {
                        this.hasMore = false;
                        this.loadStatus = 'nomore';
                    }
                } else {
                    this.hasMore = false;
                    this.loadStatus = 'nomore';
                }
            } catch (error) {
                console.log('获取提现记录失败：', error);
                this.$refs.uToast.show({
                    title: '获取记录失败，请重试',
                    type: 'error'
                });
                this.loadStatus = 'loadmore'; // 出错时重置状态
            } finally {
                this.isLoading = false;
                this.isLoadingMore = false;
            }
        },
        
        // 获取状态显示文本
        getStatusText(status) {
            switch (status) {
                case 0:
                    return '审核中';
                case 1:
                    return '已完成';
                case 2:
                    return '已拒绝';
                case 3:
                    return '已完成';
                default:
                    return '未知状态';
            }
        },
        
        // 获取状态对应的样式类
        getStatusClass(status) {
            switch (status) {
                case 0:
                    return 'status-pending';
                case 1:
                case 3:
                    return 'status-success';
                case 2:
                    return 'status-rejected';
                default:
                    return '';
            }
        }
    }
}
</script>

<style lang="scss">
.withdraw-record-container {
    min-height: 100vh;
    background-color: #F6F6F6;
    padding-bottom: 30rpx;
}

/* 加载状态 */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0;
    
    .loading-text {
        margin-top: 20rpx;
        font-size: 26rpx;
        color: #999;
    }
}

/* 记录列表 */
.record-list {
    padding: 0 30rpx;
}

.empty-record {
    padding: 100rpx 0;
}

.record-item {
    margin-top: 20rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.record-header {
    margin-bottom: 20rpx;
    
    .record-time {
        font-size: 26rpx;
        color: #666;
    }
    
    .record-status {
        font-size: 26rpx;
        font-weight: 500;
        
        &.status-pending {
            color: #FF9900;
        }
        
        &.status-success {
            color: #19BE6B;
        }
        
        &.status-rejected {
            color: #FF4D4F;
        }
    }
}

.record-body {
    align-items: center;
    
    .record-info {
        .record-amount-change {
            font-size: 30rpx;
            color: #333;
            font-weight: 500;
            margin-bottom: 10rpx;
        }
        
        .record-amount-left {
            font-size: 24rpx;
            color: #999;
        }
    }
    
    .record-amount {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }
}

.load-more {
    padding: 30rpx 0;
    text-align: center;
}
</style> 